<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>心理学小词典</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-icons-1.5.0/bootstrap-icons.css'%}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.0.2/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/customer.css' %}">

</head>

<body>


<section class="header">
    <nav class="navbar navbar-expand-lg navbar-dark  sticky-top ">
        <div class="container">
                        <a class="navbar-brand" href="#">心理学小词典</a>

                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" style="border:none;"#}
                                data-bs-target="#navbarcontent" aria-controls="navbarcontent"
                                aria-expanded="false" aria-label="触发导航栏">
                          <i class=" bi bi-filter-left buddha_icon" ></i>
                        </button>

<!--            <button class="navbar-toggler" type="button" style="border:none;"-->
<!--                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"-->
<!--                    aria-expanded="false" aria-label="触发侧边栏">-->
<!--                <i class=" bi bi-filter-left buddha_icon"></i>-->
<!--            </button>-->


            <div class="collapse navbar-collapse justify-content-end" id="navbarcontent">
                <ul class="navbar-nav align-items-center">
                    <li class="nav-item px-3 fw-bold">
                         <a class="nav-link active" aria-current="page" href="#">首页</a>
                    </li>
                     <li class="nav-item px-3 fw-bold" action="{% url 'knowledge' %}">
                         <a class="nav-link" href="http://127.0.0.1:8000/buddha/knowledge">心理学知识</a>
                    </li>
                     <li class="nav-item px-3 fw-bold" action="{% url 'history' %}">
                         <a class="nav-link" href="http://127.0.0.1:8000/buddha/history">心理学发展</a>
                    </li>
                     <li class="nav-item px-3 fw-bold" action="{% url 'organization' %}">
                         <a class="nav-link" href="http://127.0.0.1:8000/buddha/organization">组织</a>
                    </li>
                    <li class="nav-item px-3 fw-bold" action="{% url 'aboutus' %}">
                         <a class="nav-link" href="http://127.0.0.1:8000/buddha/aboutus">关于我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</section>
<section>
    <div class="offcanvas offcanvas-start bg-mobile" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel"></h5>
            <button type="button" class="btn-close btn-close-white text-reset close-buddha" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <!-- 导航栏 -->
            <ul class="navbar-nav align-items-center navbar-light">
                <li class="nav-item px-3 py-1 nav-item-buddha">
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li class="nav-item px-3 py-1 nav-item-buddha" action="{% url 'knowledge' %}">
                    <a class="nav-link" href="http://127.0.0.1:8000/buddha/knowledge">心理学知识</a>
                </li>
                <li class="nav-item px-3 py-1 nav-item-buddha" action="{% url 'history' %}">
                    <a class="nav-link" href="http://127.0.0.1:8000/buddha/history">心理学故事</a>
                </li>
                <li class="nav-item px-3 py-1 nav-item-buddha" action="{% url 'organization' %}">
                         <a class="nav-link" href="http://127.0.0.1:8000/buddha/organization">组织</a>
                </li>
                <li class="nav-item px-3 py-1 nav-item-buddha" action="{% url 'aboutus' %}">
                         <a class="nav-link" href="http://127.0.0.1:8000/buddha/aboutus">关于我们</a>
                </li>
            </ul>
             <!-- 导航栏 -->
        </div>
    </div>
</section>


<!--<section class="container">-->

<!--    <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>-->
<!--</section>-->

<section class="container">
    <div class="row mt-5 pt-5">
        <div class="col-12 text-center">
            <div class="home_title">Psychology Dictionary</div>
            <div class="home-title-big">心理学小词典</div>
        </div>
    </div>

    <form class=" search-form mt-3 mx-auto" action="{% url 'searchtwo' %}">
        <div class="row ">
            <div class="col-8 col-lg-10 ">
                <div class="input-group">
                    <div class="input-group-text search-label">
                        <i class="bi bi-search "></i>
                    </div>


                    <input type="text" ma='wd' class="form-control search-input" id="search" placeholder="请输入关键字"
                           aria-describedby="请输入关键字">
                </div>

            </div>
            <div class="col-4 col-lg-2 ">
                <button type="submit" class="btn btn-primary search-button ">
                    查一查
                </button>
            </div>
        </div>
    </form>

    <div class="row mt-3">
        <div class="col-12 text-left ">
            <span class="search-tag mx-2">热门搜索:</span>
            <span class="search-tag mx-2"><a href="http://127.0.0.1:8000/buddha/searchtwo">心理学</a></span>
            <span class="search-tag mx-2"><a href="http://127.0.0.1:8000/buddha/searchtwo">焦点访谈</a></span>
            <span class="search-tag mx-2"><a href="http://127.0.0.1:8000/buddha/searchtwo">谈心术</a></span>
        </div>

    </div>

</section>


<script src="{% static 'plugins/bootstrap-5.0.2/js/bootstrap.bundle.min.js' %}"></script>

</body>
</html>